<template>
    <div class="info">
        <section class="qq box">
          <section class="top bg">
            <i class="el-icon-arrow-left"></i>
            <span>问答机器人 (beta)</span>
            <i class="el-icon-info"></i>
          </section>
          <section class="center">
            <section class="task">
              <section class="msg" v-for="(msg,index) in msgArr" :key="index" :class="{r: msg.k}">
                <div><img :src="msg.img" alt="头像"></div>
                <div class="text">{{msg.text}}</div>
              </section>
            </section>
          </section>
          <el-input v-model="uInput" class="bottom" @keyup.enter.native="setI(uInput)">
            <el-button slot="append" icon="el-icon-upload2"  @click="setI(uInput)"></el-button>
          </el-input>
        </section>
    </div>
</template>
<script>
export default {
  name: 'info',
  data: function () {
    return {
      uInput: '',
      msgArr: [
        {
          k: true,
          img: require('../assets/2.jpg'),
          text: '在嘛'
        }, {
          img: require('../assets/1.jpg'),
          text: '不在'
        }
      ]
    }
  },
  created: function () {
    this.$router.replace('/mp3')
  }, // 创建时
  beforeMount: function () {}, // 挂载之前
  mounted: function () {}, // 挂载之后
  beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
  updated: function () {}, // 数据更新后,渲染后调用(禁止)
  beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
  destroyed: function () {}, // 实例销毁后调用
  methods: {
    setI (text) {
      this.uInput = ''
      if (!text.trim().length) { return false }
      this.msgArr.push({
        k: true,
        img: require('../assets/2.jpg'),
        text
      })
      const sT = ['天气还不错', '历史上今天是什么日子', '现在几点了', '你发的太多了', '我这会有点懵', '我要去学习一个']
      const kk = 1

      if (Math.random() * 10 <= kk) {
        this.msgArr.push({
          img: require('../assets/1.jpg'),
          text: sT[Math.floor(Math.random() * sT.length)]
        })
      }

      this.$nextTick(() => {
        document.querySelector('.center').scrollTop = document.querySelector('.msg:nth-last-of-type(1)').offsetTop
      })
    }
  } // 函数
}
</script>
<style lang='scss'>
  @function getPX($n){
    @return $n * 0.5px;
  }

    .info {

        box-sizing: border-box;
      line-height: normal;
      .qq{
        height: getPX(1280);
        width: getPX(750);
        box-shadow: 0 0 6px 1px #282828;
      }
        .box{
          display: flex;
          flex-direction: column;
          .top{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            i{
              padding: getPX(40);
            }
            &.bg{
              background-color: #3a393e;
              color: #fff;
              height: getPX(82)
            }
          }
          .center{
            flex: 1;
            overflow-y: scroll;
            background-color: #ebebeb;
            &::-webkit-scrollbar{
              width: 0;
            }
            .task{
              display: flex;
              flex-direction: column;
              padding: getPX(20);
              .msg{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: getPX(26);
                .text{
                  background-color: #fff;
                  padding: getPX(22);
                  border-radius: getPX(14);
                  position: relative;
                  margin-left: 10px;
                  text-align: left;
                  line-height: 24px;
                  word-wrap: break-word;
                  max-width: 280px;
                  &::before {
                    content: "";
                    height: 0px;
                    width: 0px;
                    position: absolute;
                    left: -17px;
                    top: 50%;
                    margin-top: -9.5px;
                    z-index: 0;
                    border-left: 9px solid transparent;
                    border-top: 9px solid transparent;
                    border-bottom: 9px solid transparent;
                    border-right: 9px solid rgba(63, 63, 63, 0.1);
                  }
                  &::after {
                    content: "";
                    height: 0px;
                    width: 0px;
                    position: absolute;
                    left: -17px;
                    top: 50%;
                    margin-top: -9.5px;
                    z-index: 1;
                    border-left: 9px solid transparent;
                    border-top: 9px solid transparent;
                    border-bottom: 9px solid transparent;
                    border-right: 9px solid rgb(255, 255, 255);
                  }
                }
                &.r{
                  justify-content: flex-end;
                  .text{
                    order: -1;
                    background-color: #a0e759;
                    margin-left: 0;
                    margin-right: 10px;
                    &::before {
                      left: auto;
                      right: -17px;
                      border-left: 9px solid #a0e759;
                      border-right: 9px solid transparent;
                    }
                    &::after{
                      left: auto;
                      right: -17px;
                      border-right: 9px solid transparent;
                      border-left: 9px solid #a0e759;
                    }
                  }
                }
                img{
                  width: getPX(84);
                  height: getPX(84);
                }
              }
            }
          }
          .bottom{
            height: getPX(97);
            input{
              height: 100%;
              font-size: 20px;
              outline: none;
            }
          }
        }
    }
</style>
